<template>
    <section class="search-result-main base-main">

        <div class="search-box bgcFFF line-bottom">
          <span @click="handleSearch">{{search.value}}</span>
        </div>

        <!--无搜索结果-->
        <div class="none text-c" v-if="productDate.length == 0">
          <div class="absolute-center">
            <img src="../../assets/img/img_search_none.png" alt="">
            <p>没有搜到相关内容</p>
            <p>换个关键词再试一次吧</p>
          </div>
        </div>
        <!--无搜索结果-->

        <!--有搜索结果-->
        <div class="result-products" v-else="productDate.length > 0">
          <!--排序菜单栏-->
          <div class="title bgcFFF">
            <van-row>
              <van-col span="4">
                <span :class="isActive == 0 ? 'active' :''" @click="handleSort(0)">
                  综合
                </span>
              </van-col>
              <van-col span="7">
                <div class="putaway-time sort-type" :class="isActive == 1 ? 'active' :''" @click="handleSort(1)">
                  <span class="text">上架时间</span>
                  <span class="sort-span">
                    <i class="iconfont iconiconfontordinaryshangjiantou-copy"></i>
                    <i class="iconfont iconiconfontordinaryshangjiantou-copy-copy"></i>
                  </span>
                </div>
              </van-col>
              <van-col span="4">
                <span :class="isActive == 2 ? 'active' :''" @click="handleSort(2)">
                  销量
                </span>

              </van-col>
              <van-col span="6">
                <div class="price sort-type pr" :class="isActive == 3 ? 'activeText' :''" @click="handleSort(3)">
                  <span class="text">价格</span>
                  <span class="sort-span">
                    <i class="iconfont iconiconfontordinaryshangjiantou-copy"></i>
                    <i class="iconfont iconiconfontordinaryshangjiantou-copy-copy"></i>
                  </span>
                  <span class="line"></span>
                </div>
              </van-col>
              <van-col span="3">
                <i @click="handleBrowseType" class="show-type iconfont iconleimupinleifenleileibie--1"></i>
              </van-col>
            </van-row>
          </div>
          <!--排序菜单栏-->

          <div class="product-list mt10 bgcFFF">
            <pull-up-reload
              :on-infinite-load="onInfiniteLoad"
              :parent-pull-up-state="infiniteLoadData.pullUpState"
            >
              <ProductList v-if="!BrowseType" :productData="productDate" @getProductId="getProductId"></ProductList>
              <ProductDiamonds v-if="BrowseType" :productData="productDate" @getProductId="getProductId"></ProductDiamonds>
            </pull-up-reload>
          </div>
        </div>

        <!--有搜索结果-->

    </section>
</template>

<script type="text/ecmascript-6">
  import PullUpReload from '../../components/PullUpReload.vue'
  import ProductList from '../../components/ProductList.vue'
  import ProductDiamonds from '../../components/ProductDiamonds.vue'

  export default {
    components:{
      PullUpReload,ProductList,ProductDiamonds
    },
    data() {
      return {
        search:{
          value:this.$route.query.text, //搜索词
          page:0, //页码--上拉加载更多用
        },
        isActive:0,//排序
        BrowseType:false,//浏览模式,默认false
        productDate:[
          {
            id:1,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:1,
            typeText:'产品上新',
            price:'268.00',
            sellNum:'2654'
          },
          {
            id:2,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:2,
            typeText:'满500减100',
            price:'268.00',
            sellNum:'2654'
          },
          {
            id:3,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:2,
            typeText:'满500减100',
            price:'268.00',
            sellNum:'2654'
          },
          {
            id:4,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            price:'268.00',
            sellNum:'2654'
          },
          {
            id:5,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:1,
            typeText:'产品上新',
            price:'268.00',
            sellNum:'2654'
          },
          {
            id:6,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:2,
            typeText:'满500减100',
            price:'268.00',
            sellNum:'2654'
          },
        ],  //热卖产品

        // 上拉加载的设置
        infiniteLoadData: {
          initialShowNum: 3, // 初始显示多少条
          everyLoadingNum: 3, // 每次加载的个数
          pullUpState: 0, // 子组件的pullUpState状态
          pullUpList: [], // 上拉加载更多数据的数组
          showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
        }
      }
    },
    created () {
//      console.log('000',this.productData);
    },
    methods: {
      handleSearch(){
        this.$router.replace({
          path:'/index/web/search',
        })
      },
      //排序方式切花
      handleSort(index){
        this.isActive = index;
      },
      //浏览模式切换
      handleBrowseType(){
        this.BrowseType = !this.BrowseType
        if(this.BrowseType){
          $('.show-type').removeClass('iconleimupinleifenleileibie--1').addClass('iconfenlei')
        }else{
          $('.show-type').removeClass('iconfenlei').addClass('iconleimupinleifenleileibie--1')
        }

      },
      //点击的产品id，跳转到产品详情页
      getProductId(obj){
        this.$router.replace({
          path:'/index/web/product',
          query: {
            id: obj.id,
          }
        })
      },
      // 上拉一次加载更多的数据
      getPullUpMoreData () {
        this.showPullUpListLength = this.infiniteLoadData.pullUpList.length
        if (this.infiniteLoadData.pullUpList.length + this.infiniteLoadData.everyLoadingNum > this.productData.length) {
          for (let i = 0; i < this.productData.length - this.showPullUpListLength; i++) {
            this.infiniteLoadData.pullUpList.push(this.productData[i + this.showPullUpListLength])
          }
        } else {
          for (let i = 0; i < this.infiniteLoadData.everyLoadingNum; i++) {
            this.infiniteLoadData.pullUpList.push(this.productData[i + this.showPullUpListLength])
          }
        }
        if (this.productData.length === this.infiniteLoadData.pullUpList.length) {
          this.infiniteLoadData.pullUpState = 3
        } else {
          this.infiniteLoadData.pullUpState = 0
        }
      },
      // 上拉加载
      onInfiniteLoad (done) {
        if (this.infiniteLoadData.pullUpState === 0) {
          this.getPullUpMoreData()
        }
        done()
      }
    },
  }
</script>

<style lang="scss">
  @import '../../assets/css/searchResult.scss';
</style>
